<template>
	<view class="valuate-container">
		<view class="title-row">
			<text class="title-item">图片预览</text>
			<view class="iconfont icon-cancelquxiao" @click="close"></view>
		</view>
		<view @tap="showPic" class="img-wrap">
			<img  class="img" :src="url"></img>
		</view>
		<view class="btn-wrap">
			<text class="cancle-btn" @click="close">取消</text>
			<text class="submit-btn" @click="onSubmit">确认</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: this.imageSrc
			}
		},
		props: {
			imageSrc: {
				type: String,
				default: ''
			}
		},
		methods: {
			showPic() {
				uni.previewImage({
					indicator: "none",
					current: this.url,
					urls: [this.url]
				});
			},
			onSubmit() {
				this.$emit('onPreview', true)
			},
			close() {
				this.$emit('onPreview', false)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/font/iconfont.scss';
	.valuate-container {
		padding: 30upx;
		font-size: 30upx;
		color: #72819B;
		background-color: #fff;
		box-sizing: border-box;
	}
	.title-row {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.title-item {
			font-weight: 600;
		}

		.icon-cancelquxiao {
			font-size: 30upx;
			color: #acacac;
		}
	}
	.img-wrap{
		text-align: center;
		padding:8upx;
		.img{
			max-width: 100%;
			max-height: 600upx;
		}
	}

	.btn-wrap {
		height: 100upx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
        font-size: 24upx;
		.cancle-btn {
			width: 90upx;
			height: 56upx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 20upx;
			background-color:#f2f2f2 ;
			border-radius: 6upx;
		}

		.submit-btn {
			width: 90upx;
			height: 56upx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: linear-gradient(-50deg, #3861FE 0%, #489BFE 100%);
			color: #fff;
			border-radius: 6upx;
		}
	}
</style>
